<template>
  <header class="bg-white shadow-md">
    <nav class="container mx-auto px-4 py-4">
      <div class="flex justify-between items-center">
        <router-link to="/" class="text-2xl font-bold">
          力望电子
        </router-link>

        <div class="hidden md:flex space-x-8">
          <div 
            v-for="item in menuItems" 
            :key="item.path"
            class="relative group"
          >
            <router-link 
              v-if="!item.children"
              :to="item.path"
              class="text-gray-700 hover:text-blue-600"
            >
              {{ item.title }}
            </router-link>
            
            <div v-else class="relative">
              <button 
                class="text-gray-700 hover:text-blue-600 flex items-center"
                @mouseenter="showDropdown = item.title"
              >
                {{ item.title }}
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              
              <div 
                v-show="showDropdown === item.title"
                @mouseleave="showDropdown = null"
                class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"
              >
                <router-link
                  v-for="child in item.children"
                  :key="child.path"
                  :to="child.path"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                >
                  {{ child.title }}
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script setup>
import { ref } from 'vue'

const showDropdown = ref(null)

const menuItems = [
  { title: '首页', path: '/' },
  { title: '解决方案', path: '/solutions' },
  { title: '客户案例', path: '/cases' },
  { title: '新闻资讯', path: '/news' },
  { 
    title: '关于我们',
    children: [
      { title: '公司简介', path: '/about' },
      { title: '联系我们', path: '/about/contact' }
    ]
  }
]
</script>

<style scoped>
.router-link-active {
  color: #2563eb;
  font-weight: 500;
}
</style>